﻿<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />


    <title>
        Custom-duration timeline views - Demos | FullCalendar
    </title>


    <link href='https://fullcalendar.io/assets/demo-to-codepen.css' rel='stylesheet' />


    <style>
        html, body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 40px auto;
        }
    </style>


    <link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />




    <link href='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.css' rel='stylesheet' />



    <link href='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.css' rel='stylesheet' />


    <script src='https://fullcalendar.io/assets/demo-to-codepen.js'></script>

    <script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>




    <script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>

    <script src='https://unpkg.com/@fullcalendar/timeline@4.3.0/main.min.js'></script>

    <script src='https://unpkg.com/@fullcalendar/resource-common@4.3.1/main.min.js'></script>

    <script src='https://unpkg.com/@fullcalendar/resource-timeline@4.3.0/main.min.js'></script>



    <script>

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'resourceTimeline' ],
      timeZone: 'UTC',
      header: {
        left: 'today prev,next',
        center: 'title',
        right: 'resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear'
      },
      defaultView: 'resourceTimelineDay',
      scrollTime: '08:00',
      aspectRatio: 1.5,
      views: {
        resourceTimelineDay: {
          buttonText: ':15 slots',
          slotDuration: '00:15'
        },
        resourceTimelineTenDay: {
          type: 'resourceTimeline',
          duration: { days: 10 },
          buttonText: '10 days'
        }
      },
      editable: true,
      resourceLabelText: 'Rooms',
      resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
      events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
    });

    calendar.render();
  });

    </script>

</head>
<body>
    <div class='demo-topbar'>
        <button data-codepen class='codepen-button'>Edit in CodePen</button>




        Custom-duration timeline views

    </div>

    <div id='calendar'></div>
</body>

</html>
